<template>
  <ul class="supports">
    <li class="supports-item f0"
        v-for="(item,index) in supports"
        :key="index"
        :class="{'border-1px-top':topFlag}">
      <span class="icon inline-block"
            :class="classMap[item.type]"></span>
      <strong class="supports-text f12 fw300">{{item.description}}</strong>
    </li>
  </ul>
</template>

<script>
import { mixin } from 'mixin';
export default {
  'mixins': [mixin],
  'name': '',
  'props': {
    'supports': {
      'type': Array,
      'default': []
    },
    'topFlag': {
      'type': Boolean,
      'default': false
    }
  },
  data() {
    return {};
  },
  'components': {},
  created() {
    // data数据已经初始化，但是DOM结构渲染完成，组件没有加载
  },
  mounted() {
    // DOM渲染完成，组件挂载完成
  },
  'computed': {},
  'methods': {},
  'watch': {}
};
</script>

<style lang='stylus' rel='stylesheet/stylus'>
@import '~common/stylus/mixin'
.supports
  .supports-item
    display flex
    align-items center
    padding(0, 12, 0, 12)
    margin-bottom 10px
    &:last-child
      margin-bottom 0
    .icon
      &.decrease
        bg-image('decrease_2', 16, 16)
      &.discount
        bg-image('discount_2', 16, 16)
      &.guarantee
        bg-image('guarantee_2', 16, 16)
      &.invoice
        bg-image('invoice_2', 16, 16)
      &.special
        bg-image('special_2', 16, 16)
    .supports-text
      margin-left 6px
</style>
